<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE>
<html lang="zh-CN">
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/fresh-bootstrap-table.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<base href="<%=basePath%>">
<title>books</title>

</head>
<body>
<form action="">
</form>
<div class="wrapper">
<div class="fresh-table full-color-azure">
<!-- 根据用户类型的不同展示不同的界面：-1：其他：无法看到价格  0：可以看到价格  1：可以进行修改-->
<c:if test="${sessionScope.usertype==-1}">
<table id="fresh-table" class="table">
            <thead>
            <tr>
                <th data-field="bno" data-sortable="true">编号</th>
            	<th data-field="title" data-sortable="true">书名</th>
            	<th data-field="category" data-sortable="true">类别</th>
            	<th data-field="publish" data-sortable="true">出版社</th>
            	<th data-field="year" data-sortable="true">出版年份</th>
            	<th data-field="author" data-sortable="true">作者</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="B" items="${res}" > 
       <tr>
	       <td>${B.bno}</td>
	       <td>${B.title}</td>
	       <td>${B.category}</td>
	       <td>${B.publish}</td>
	       <td>${B.year}</td>
	       <td>${B.author}</td>
	   </tr>
    </c:forEach>  
    </tbody>
    </table>
</c:if>
<c:if test="${sessionScope.usertype==0}">
<table id="fresh-table" class="table">
            <thead>
            <tr>
                <th data-field="bno" data-sortable="true">编号</th>
            	<th data-field="title" data-sortable="true">书名</th>
            	<th data-field="category" data-sortable="true">类别</th>
            	<th data-field="publish" data-sortable="true">出版社</th>
            	<th data-field="year" data-sortable="true">出版年份</th>
            	<th data-field="author" data-sortable="true">作者</th>
            	<th data-field="price" data-sortable="true">价格</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="B" items="${res}" > 
       <tr>
	       <td>${B.bno}</td>
	       <td>${B.title}</td>
	       <td>${B.category}</td>
	       <td>${B.publish}</td>
	       <td>${B.year}</td>
	       <td>${B.author}</td>
	       <td>${B.price}</td>
	   </tr>
    </c:forEach>  
    </tbody>
    </table>
<!-- able  border="1" >
  		<tr>
  			<th>编号</th>
	  		<th>书名</th>
	  		<th>类别</th>
	  		<th>出版社</th>
	  		<th>出版年份</th>
	  		<th>作者</th>
	  		<th>价格</th>
  		</tr>
     
	<c:forEach var="B" items="${res}" > 
       <tr>
	       <td>${B.bno}</td>
	       <td>${B.title}</td>
	       <td>${B.category}</td>
	       <td>${B.publish}</td>
	       <td>${B.year}</td>
	       <td>${B.author}</td>
	       <td>${B.price}</td>
	   </tr>
    </c:forEach>  
    </table-->
</c:if>

<c:if test="${sessionScope.usertype==1}">
<table id="fresh-table" class="table">
            <thead>
            <tr>
                <th data-field="bno" data-sortable="true">编号</th>
            	<th data-field="title" data-sortable="true">书名</th>
            	<th data-field="category" data-sortable="true">类别</th>
            	<th data-field="publish" data-sortable="true">出版社</th>
            	<th data-field="year" data-sortable="true">出版年份</th>
            	<th data-field="author" data-sortable="true">作者</th>
            	<th data-field="price" data-sortable="true">价格</th>
            	<th data-field="total" data-sortable="true">总量</th>
            	<th data-field="stock" data-sortable="true">库存</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="B" items="${res}" > 
       <tr>
	       <td>${B.bno}</td>
	       <td>${B.title}</td>
	       <td>${B.category}</td>
	       <td>${B.publish}</td>
	       <td>${B.year}</td>
	       <td>${B.author}</td>
	       <td>${B.price}</td>
	       <td>${B.total}</td>
	       <td>${B.stock}</td>
	   </tr>
    </c:forEach>  
    </tbody>
    </table>
<!-- table  border="1" >
  		<tr>
  			<th>编号</th>
	  		<th>书名</th>
	  		<th>类别</th>
	  		<th>出版社</th>
	  		<th>出版年份</th>
	  		<th>作者</th>
	  		<th>价格</th>
	  		<th>总量</th>
	  		<th>库存</th>
  		</tr>
     
	<c:forEach var="B" items="${res}" > 
       <tr>
	       <td><c:out value="${B.bno}" /></td>
	       <td><c:out value="${B.title}" /></td>
	       <td><c:out value="${B.category}" /></td>
	       <td><c:out value="${B.publish}" /></td>
	       <td><c:out value="${B.year}"/></td>
	       <td><c:out value="${B.author}"/></td>
	       <td><c:out value="${B.price}"/></td>
	       <td><c:out value="${B.total}"/></td>
	       <td><c:out value="${B.stock}"/></td>
	   </tr>
    </c:forEach>  
    </table-->
</c:if>
 </div>
    
</div>

</body>

<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap-table.js"></script>
        
    <script type="text/javascript">
        var $table = $('#fresh-table'),
            $alertBtn = $('#alertBtn'), 
            full_screen = false,
            window_height;
            
        $().ready(function(){
            
            window_height = $(window).height();
            table_height = window_height - 20;
            
            
            $table.bootstrapTable({
                toolbar: ".toolbar",

                showRefresh: true,
                search: true,
                showToggle: true,
                showColumns: true,
                pagination: true,
                striped: true,
                sortable: true,
                height: table_height,
                pageSize: 25,
                pageList: [25,50,100],
                
                formatShowingRows: function(pageFrom, pageTo, totalRows){
                    //do nothing here, we don't want to show the text "showing x of y from..." 
                },
                formatRecordsPerPage: function(pageNumber){
                    return pageNumber + " rows visible";
                },
                icons: {
                    refresh: 'fa fa-refresh',
                    toggle: 'fa fa-th-list',
                    columns: 'fa fa-columns',
                    detailOpen: 'fa fa-plus-circle',
                    detailClose: 'fa fa-minus-circle'
                }
            });
            
            window.operateEvents = {
                'click .like': function (e, value, row, index) {
                    alert('You click like icon, row: ' + JSON.stringify(row));
                    console.log(value, row, index);
                },
                'click .edit': function (e, value, row, index) {
                    alert('You click edit icon, row: ' + JSON.stringify(row));
                    console.log(value, row, index);    
                },
                'click .remove': function (e, value, row, index) {
                    $table.bootstrapTable('remove', {
                        field: 'id',
                        values: [row.id]
                    });
            
                }
            };
            
            $alertBtn.click(function () {
                alert("You pressed on Alert");
            });
        
            
            $(window).resize(function () {
                $table.bootstrapTable('resetView');
            });    
        });
        

        function operateFormatter(value, row, index) {
            return [
                '<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">',
                    '<i class="fa fa-heart"></i>',
                '</a>',
                '<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">',
                    '<i class="fa fa-edit"></i>',
                '</a>',
                '<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">',
                    '<i class="fa fa-remove"></i>',
                '</a>'
            ].join('');
        }
       
    </script>
</html>